<template>
  <div class="hello">
    <user-list :users="users">
      <template v-slot="slotProps">
        <label class="id-label">{{ slotProps.user.id }}</label>
      </template>

      <template v-slot:first="slotProps">
        <div class="first-label">{{ slotProps.user.firstName }}</div>
      </template>

      <template v-slot:last="slotProps">
        <button>{{ slotProps.user.lastName }}</button>
      </template>
    </user-list>
  </div>
</template>

<script>
import UserList from "@/components/UserList";

export default {
  name: 'HelloWorld',
  components: { UserList },
  data() {
    return {
      users: [
        { id: 1, firstName: 'a1', lastName: 'a2' },
        { id: 2, firstName: 'b1', lastName: 'b2' },
        { id: 3, firstName: 'c1', lastName: 'c2' },
      ]
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

.id-label {
  color: pink;
}

.first-label {
  height: 20px;
  width: 20px;
  background: cornflowerblue;
  display: inline-block;
  margin: 0 20px;
}
</style>
